<template>
  <div class="wrap">
    <!-- 高频词 -->
    <div class="highword">
      <el-tag type="success">高频词</el-tag>
      <div style="width: 400%; height: 300px" id="chart-container" ref="gpcEchart"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
      // this.initWord();

  },
  methods: {
    // 高频词
    initWord() {
      // console.log(111);

      // debugger
      const chart = echarts.init(this.$refs.gpcEchart);

      let option = {
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: 90,
              edgeLength: 20,
            },
            symbolSize: 50,
            label: {
              show: true,
              fontWeight: "bold",
              color: "#fff",
            },
            data: [
              {
                name: "华中",
                symbolSize: 90,
                itemStyle: {
                  color: "#4169E1",
                },
              },
              {
                name: "华南",
                symbolSize: 60,
                itemStyle: {
                  color: "#FFD700",
                },
              },
              {
                name: "东北",
                symbolSize: 55,
                itemStyle: {
                  color: "#30ECA6",
                },
              },
              {
                name: "西北",
                itemStyle: {
                  color: "#E6E6FA",
                },
              },
              {
                name: "西南",
                itemStyle: {
                  color: "#87CEFA",
                },
              },
              {
                name: "华北",
                symbolSize: 70,
                itemStyle: {
                  color: "#00BFBB",
                },
              },
              {
                name: "华西",
                itemStyle: {
                  color: "#87CE22",
                },
              },
              {
                name: "东南",
                symbolSize: 70,
                itemStyle: {
                  color: "#00BFFF",
                },
              },
              {
                name: "华东",
                symbolSize: 70,
                itemStyle: {
                  color: "#7B68EE",
                },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
      console.log('chart: ', chart,option);
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;
  background: rgb(141, 35, 53);
  .highword {
    width: 100%;
    height: 100%;
    background: rgb(26, 2, 6);
    #chart-container {
      width: 400px !important;
      height: 600px !important;
      background: rgb(214, 191, 195);
    }
  }
}
</style>